<template>
  <layout-body>
    <!-- 列表 -->
    <el-table
      v-loading="initLoading"
      class="mt20"
      :data="lists"
      row-key="id"
      lazy
      :load="loadChildren"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="名称" prop="name">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template></el-table-column
      >
      <el-table-column label="简称" prop="shortname">
        <template #default="scope">
          <span>{{ scope.row.shortname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="全称" prop="merger_name">
        <template #default="scope">
          <span>{{ scope.row.merger_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="拼音" prop="pinyin">
        <template #default="scope">
          <span>{{ scope.row.pinyin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="长途区号" prop="code">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮编" prop="zip_code">
        <template #default="scope">
          <span>{{ scope.row.zip_code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经纬度" prop="lng">
        <template #default="scope">
          <div>{{ scope.row.lng }}</div>
          <div>{{ scope.row.lat }}</div>
        </template>
      </el-table-column>
    </el-table>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getRegionList } from "@/api/system/region";
import { listPageType, Result, ResultError } from "@/types";

const initLoading = ref<boolean>(true);

const lists = ref<any>([]);

const toInit = () => {
  initLoading.value = true;
  getRegionList({ pid: 0 })
    .then((res: Result) => {
      lists.value = res.data;
      setTimeout(() => {
        initLoading.value = false;
      }, 500);
    })
    .catch((err: ResultError) => {});
};

interface Item {
  id?: number;
  name?: string;
  merger_name?: string;
  code?: string;
  pinyin?: string;
  shortname?: string;
  zip_code?: string;
  first?: string;
  level?: number;
  lat?: string;
  lng?: string;
  pid?: number;
  hasChildren?: boolean;
  children?: Item[];
}

const loadChildren = (
  row: Item,
  treeNode: unknown,
  resolve: (name: Item[]) => void
) => {
  getRegionList({ pid: row.id || 0 })
    .then((res: Result) => {
      resolve(res.data);
    })
    .catch((err: ResultError) => {});
};

onMounted(() => {
  toInit();
});
</script>